/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";

$passed: #00c853;
$background: #fff;
$stage-width: 82px;
$border-color: #ccc;
$disabled-text-color: #999;
$stage-status-unknown: #fafafa;
$build-details-z-index: 5;
$modification-text-color: #ff6;
$dropdown-background-color: #333;
$icon-size: 10px;
$disabled-icon-color: #e0e0e0;
$stage-status-bar-z-index: 2;
$stage-action-icon-z-index: 1;

.pipeline-activity {
  display: flex;
  width: 100%;
}

.pipeline-activity-table {
  overflow-x: auto;
  background: $background;
  padding: 16px;
  width: 100%;
}

.group-header,
.group-content {
  display: flex;
  flex-direction: row;
  width: max-content;
  min-width: 100%;
  padding-bottom: 2px;
  border-bottom: 1px dashed $border-color;

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
    max-width: 325px;
    min-width: 325px;
    margin-right: 16px;
    padding-bottom: 5px;
  }

  .right {
    display: flex;
    padding-right: 16px;
  }
}

.group-header {
  font-size: 12px;
  font-weight: 600;
}

.header {
  font-size: 12px;
  font-weight: 600;
}

.stage-name {
  display: flex;
  width: $stage-width;
  word-break: break-all;
  line-height: 1.22em;
  align-self: center;
  min-width: $stage-width;

  &:last-child {
    margin-right: 0;
  }
}

.run {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;

  .label {
    word-break: break-all;
    overflow-wrap: break-word;
  }

  a {
    font-size: 14px;
    text-decoration: none;
    color: $link-color;
  }
}

.group-content {
  .revision {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .schedule-info {
    font-size: 12px;
  }
}

.disabled {
  color: $disabled-text-color;
}

.stage-box-pipeline-activity {
  max-width: $stage-width + 50px;
  display: flex;
  align-items: start;
  justify-content: center;
  padding-top: 36px;
  padding-bottom: 36px;
}

.stage-status {
  display: block;
  width: 82px;
  height: 12px;
  border-radius: 2px;
  z-index: $stage-status-bar-z-index;
}

.stage-status-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: start;
  padding-top: 5px;
}

.disabled-icon {
  color: $disabled-icon-color;

  &:hover {
    color: $disabled-icon-color;
  }
}

.unknown,
.building,
.cancelled,
.failed,
.passed,
.waiting,
.failing {
  color: $white;
  cursor: pointer;

  &::before {
    position: absolute;
    left: 35px;
  }
}

.unknown {
  background: $stage-status-unknown;
  border: 1px solid $border-color;
  cursor: auto;
  width: 80px;      // compensating for border
}

.building {
  background: transparent url("../../../../app/assets/images/building.gif") repeat-x;
}

.failing {
  background: $failed url("../../../../app/assets/images/failing.gif") repeat-x;
}

.cancelled {
  color: $black;
  background: transparent url("../../../../app/assets/images/building.png") repeat-x;

  @include icon-before($fa-var-ban, $icon-size, 1px);
}

.failed {
  background: $failed;

  @include icon-before($fa-var-exclamation-circle, $icon-size, 1px);
}

.passed {
  background: $passed;

  @include icon-before($fa-var-check, $icon-size, 1px);
}

.waiting {
  color: $black;
  background: transparent url("../../../../app/assets/images/building.png") repeat-x;

  @include icon-before($fa-var-spinner, $icon-size, 1px);

  &::before {
    animation: spin 1500ms linear infinite;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.build-cause-button {
  color: $link-color;
  cursor: pointer;
  font-size: 12px;
}

.close-button-wrapper {
  button {
    position: absolute;
    width: 22px;
    height: 22px;
    right: 15px;
    top: 5px;
    background: $go-darkblue;

    i::before {
      margin: -5px;
      font-size: 14px;
    }

    &:hover {
      background: $btn-danger;
    }
  }
}

.build-details {
  position: absolute;
  background: $dropdown-background-color;
  color: $white;
  width: 50%;
  padding: 10px 16px;
  border-radius: 3px;
  display: flex;
  z-index: $build-details-z-index;
  flex-direction: column;

  .material-revision-dropdown-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }

  .material-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 5px;
    font-size: 12px;
    word-break: break-all;
    border-bottom: 1px solid $border-color;
  }

  .modifications {
    margin-bottom: 10px;
    border-bottom: 1px dotted $border-color;
  }

  .modification {
    display: flex;
    font-size: 12px;
    font-weight: 400;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px dotted $border-color;

    &:last-of-type {
      border: none;
    }

    .revision,
    .comment,
    .user {
      width: 20%;
      padding: 3px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      align-content: center;
    }

    .comment {
      width: 40%;
      max-height: 6.4em;
      padding: 3px 10px;

      a {
        color: $link-color;
      }
    }
  }

  .changed {
    color: $modification-text-color;

    .modification {
      border-color: $modification-text-color;
    }
  }
}

.force-build {
  .left {
    align-items: self-start;
    padding: 10px 0;
  }
}

.pagination-wrapper {
  display: flex;
  margin-top: 20px;
}

.page-header {
  display: flex;

  .pipeline-info {
    display: flex;
    flex-direction: column;
    height: 100%;

    .label {
      font-size: 0.625rem;
    }

    .value {
      font-size: 15px;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 200px;
      overflow: hidden;
    }
  }

  .icon-container {
    display: flex;
    margin: 0 10px;
    align-self: center;
  }

  .pause-message {
    align-self: center;
    font-size: 11px;
    font-weight: normal;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.pipeline-run-comment {
  display: flex;
  padding: 5px 10px;
  overflow-wrap: break-word;
  overflow-y: auto;
  margin: 10px 0;
  min-height: 100px;
  max-height: 400px;
  border: 1px dashed $border-color;
  border-radius: 3px;
}

.no-margin {
  margin-left: 0;
}

.margin-23 {
  margin-left: 23px;
}

.manual-wrapper {
  width: 23px;
  text-align: center;
}
